@thecb/components 4.0.24 → 4.1.3
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/.tool-versions +1 -1
- package/dist/index.cjs.js +3746 -3523
- package/package.json +1 -1
- package/src/components/atoms/box-with-shadow/BoxWithShadow.js +55 -0
- package/src/components/atoms/box-with-shadow/BoxWithShadow.theme.js +7 -0
- package/src/components/atoms/box-with-shadow/index.js +3 -0
- package/src/components/atoms/icons/WalletIcon.js +190 -0
- package/src/components/atoms/icons/index.js +3 -1
- package/src/components/atoms/index.js +1 -0
- package/src/components/molecules/email-form/EmailForm.js +7 -0
- package/src/components/molecules/payment-button-bar/PaymentButtonBar.js +6 -4
- package/src/constants/colors.js +2 -1
package/package.json
CHANGED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { rgba } from "polished";
|
|
3
|
+
import { fallbackValues } from "./BoxWithShadow.theme";
|
|
4
|
+
import Box from "../layouts/Box";
|
|
5
|
+
import { themeComponent } from "../../../util/themeUtils";
|
|
6
|
+
import { BLACK } from "../../../constants/colors";
|
|
7
|
+
|
|
8
|
+
const BoxWithShadow = ({ variant, themeValues, children, ...props }) => {
|
|
9
|
+
const shadowRegistry = {
|
|
10
|
+
baseStandard: `0px 3px 7px 2px ${rgba(BLACK, 0.1)}, 0px 1px 2px 1px ${rgba(
|
|
11
|
+
BLACK,
|
|
12
|
+
0.1
|
|
13
|
+
)};`,
|
|
14
|
+
baseHover: `0px 1px 7px 0px ${rgba(BLACK, 0.3)}, 0px 1px 4px 0px ${rgba(
|
|
15
|
+
BLACK,
|
|
16
|
+
0.2
|
|
17
|
+
)}, 0px 7px 12px 0px ${rgba(BLACK, 0.2)};`,
|
|
18
|
+
baseClick: `0px 4px 7px 0px ${rgba(BLACK, 0.3)}, 0px 1px 4px 0px ${rgba(
|
|
19
|
+
BLACK,
|
|
20
|
+
0.2
|
|
21
|
+
)}, 0px 7px 12px 0px ${rgba(BLACK, 0.2)};`,
|
|
22
|
+
insetStandard: `0px 1px 4px 2px ${rgba(BLACK, 0.1)}, 0px 2px 1px 0px ${rgba(
|
|
23
|
+
BLACK,
|
|
24
|
+
0.15
|
|
25
|
+
)};`,
|
|
26
|
+
insetHover: `0px 1px 4px 0px ${rgba(BLACK, 0.3)}, 0px 1px 2px 2px ${rgba(
|
|
27
|
+
BLACK,
|
|
28
|
+
0.2
|
|
29
|
+
)}, 0px 4px 8px 0px ${rgba(BLACK, 0.2)};`,
|
|
30
|
+
insetClick: `0px 4px 4px 0px ${rgba(BLACK, 0.3)}, 0px 1px 2px 2px ${rgba(
|
|
31
|
+
BLACK,
|
|
32
|
+
0.2
|
|
33
|
+
)}, 0px 4px 8px 0px ${rgba(BLACK, 0.2)};`,
|
|
34
|
+
linkShadowFocus: `0px 0px 5px 2px ${rgba(
|
|
35
|
+
themeValues.linkColor,
|
|
36
|
+
0.3
|
|
37
|
+
)}, 0px 1px 2px 0px ${rgba(
|
|
38
|
+
themeValues.linkColor,
|
|
39
|
+
0.3
|
|
40
|
+
)}, 0px 4px 8px 0px ${rgba(themeValues.linkColor, 0.2)};`,
|
|
41
|
+
overlayShadow: `0px 1px 8px -1px ${rgba(
|
|
42
|
+
BLACK,
|
|
43
|
+
0.3
|
|
44
|
+
)}, 0px 1px 4px 0px ${rgba(BLACK, 0.2)}, 0px 7px 32px 0px ${rgba(
|
|
45
|
+
BLACK,
|
|
46
|
+
0.2
|
|
47
|
+
)};`
|
|
48
|
+
};
|
|
49
|
+
return (
|
|
50
|
+
<Box boxShadow={shadowRegistry[variant]} {...props}>
|
|
51
|
+
{children}
|
|
52
|
+
</Box>
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
export default themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues);
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { fallbackValues } from "./Icons.theme";
|
|
3
|
+
import { themeComponent } from "../../../util/themeUtils";
|
|
4
|
+
|
|
5
|
+
const WalletIcon = ({ themeValues }) => {
|
|
6
|
+
return (
|
|
7
|
+
<svg
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
width="299"
|
|
10
|
+
height="150"
|
|
11
|
+
viewBox="0 0 299 150"
|
|
12
|
+
>
|
|
13
|
+
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
|
|
14
|
+
<g transform="translate(-154 -340)">
|
|
15
|
+
<g transform="translate(132 261)">
|
|
16
|
+
<g transform="translate(22 79)">
|
|
17
|
+
<g
|
|
18
|
+
stroke="#3B414D"
|
|
19
|
+
strokeLinecap="round"
|
|
20
|
+
strokeWidth="4.08"
|
|
21
|
+
transform="translate(52.686 118.445)"
|
|
22
|
+
>
|
|
23
|
+
<path d="M208.2 0.375L175.611 0.776"></path>
|
|
24
|
+
<path d="M233.568 0.375L218.318 0.776"></path>
|
|
25
|
+
<path d="M44.527 0.375L17.757 0.776"></path>
|
|
26
|
+
<path d="M7.759 0.375L0 0.776"></path>
|
|
27
|
+
</g>
|
|
28
|
+
<path
|
|
29
|
+
fill="#B8E4F4"
|
|
30
|
+
d="M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
|
|
31
|
+
></path>
|
|
32
|
+
<g
|
|
33
|
+
stroke="#45B770"
|
|
34
|
+
strokeLinecap="round"
|
|
35
|
+
strokeLinejoin="round"
|
|
36
|
+
strokeWidth="4.08"
|
|
37
|
+
transform="translate(150.58 129.154)"
|
|
38
|
+
>
|
|
39
|
+
<path d="M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"></path>
|
|
40
|
+
<path d="M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"></path>
|
|
41
|
+
</g>
|
|
42
|
+
<path
|
|
43
|
+
stroke="#45B770"
|
|
44
|
+
strokeLinecap="round"
|
|
45
|
+
strokeLinejoin="round"
|
|
46
|
+
strokeWidth="4.08"
|
|
47
|
+
d="M97.135 97.043L85.756 106.925"
|
|
48
|
+
></path>
|
|
49
|
+
<path
|
|
50
|
+
stroke="#45B770"
|
|
51
|
+
strokeLinecap="round"
|
|
52
|
+
strokeLinejoin="round"
|
|
53
|
+
strokeWidth="4.08"
|
|
54
|
+
d="M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
|
|
55
|
+
></path>
|
|
56
|
+
<path
|
|
57
|
+
stroke="#45B770"
|
|
58
|
+
strokeLinecap="round"
|
|
59
|
+
strokeWidth="4.08"
|
|
60
|
+
d="M257.527 89.028L274.395 89.028"
|
|
61
|
+
></path>
|
|
62
|
+
<g transform="translate(255.032 47.73)">
|
|
63
|
+
<rect
|
|
64
|
+
width="40.703"
|
|
65
|
+
height="25.03"
|
|
66
|
+
x="1.02"
|
|
67
|
+
y="1.02"
|
|
68
|
+
fill="#E8FFEF"
|
|
69
|
+
stroke="#45B770"
|
|
70
|
+
strokeWidth="2.04"
|
|
71
|
+
rx="2.72"
|
|
72
|
+
></rect>
|
|
73
|
+
<path fill="#45B770" d="M0 6.411H42.743V12.11H0z"></path>
|
|
74
|
+
</g>
|
|
75
|
+
<g transform="translate(249.333 54.141)">
|
|
76
|
+
<rect
|
|
77
|
+
width="40.703"
|
|
78
|
+
height="25.03"
|
|
79
|
+
x="1.02"
|
|
80
|
+
y="1.02"
|
|
81
|
+
fill="#CACED8"
|
|
82
|
+
stroke="#3B414D"
|
|
83
|
+
strokeWidth="2.04"
|
|
84
|
+
rx="2.72"
|
|
85
|
+
></rect>
|
|
86
|
+
<path fill="#3B414D" d="M0 6.411H42.743V12.11H0z"></path>
|
|
87
|
+
<rect
|
|
88
|
+
width="9.973"
|
|
89
|
+
height="2.85"
|
|
90
|
+
x="27.163"
|
|
91
|
+
y="18.367"
|
|
92
|
+
fill="#3B414D"
|
|
93
|
+
rx="1.36"
|
|
94
|
+
></rect>
|
|
95
|
+
</g>
|
|
96
|
+
<g transform="translate(237.223 59.128)">
|
|
97
|
+
<circle
|
|
98
|
+
cx="8.905"
|
|
99
|
+
cy="8.905"
|
|
100
|
+
r="8.905"
|
|
101
|
+
fill={themeValues.subIconColor}
|
|
102
|
+
></circle>
|
|
103
|
+
<g fill="#FFF" transform="translate(4.274 4.274)">
|
|
104
|
+
<path d="M3.562 0H5.699V9.261H3.562z"></path>
|
|
105
|
+
<path d="M0 3.562H9.261V5.699H0z"></path>
|
|
106
|
+
</g>
|
|
107
|
+
</g>
|
|
108
|
+
<path
|
|
109
|
+
fill="#B8E4F4"
|
|
110
|
+
stroke="#3B414D"
|
|
111
|
+
strokeWidth="4.08"
|
|
112
|
+
d="M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
|
|
113
|
+
></path>
|
|
114
|
+
<rect
|
|
115
|
+
width="32.964"
|
|
116
|
+
height="11.592"
|
|
117
|
+
x="97.499"
|
|
118
|
+
y="22.699"
|
|
119
|
+
stroke="#3B414D"
|
|
120
|
+
strokeWidth="4.08"
|
|
121
|
+
rx="5.796"
|
|
122
|
+
></rect>
|
|
123
|
+
<path
|
|
124
|
+
fill="#B8E4F4"
|
|
125
|
+
d="M121.817 24.933H141.051V32.057H121.817z"
|
|
126
|
+
></path>
|
|
127
|
+
<rect
|
|
128
|
+
width="133.928"
|
|
129
|
+
height="98.309"
|
|
130
|
+
x="95.459"
|
|
131
|
+
y="32.057"
|
|
132
|
+
fill="#FFF"
|
|
133
|
+
rx="10.88"
|
|
134
|
+
></rect>
|
|
135
|
+
<path
|
|
136
|
+
stroke="#3B414D"
|
|
137
|
+
strokeWidth="4.08"
|
|
138
|
+
d="M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
|
|
139
|
+
></path>
|
|
140
|
+
<path
|
|
141
|
+
fill="#FFF"
|
|
142
|
+
d="M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
|
|
143
|
+
></path>
|
|
144
|
+
<path
|
|
145
|
+
stroke="#45B770"
|
|
146
|
+
strokeLinecap="round"
|
|
147
|
+
strokeLinejoin="round"
|
|
148
|
+
strokeWidth="4.08"
|
|
149
|
+
d="M85.756 106.925L111.684 112.988"
|
|
150
|
+
></path>
|
|
151
|
+
<g
|
|
152
|
+
stroke="#45B770"
|
|
153
|
+
strokeLinecap="round"
|
|
154
|
+
strokeLinejoin="round"
|
|
155
|
+
strokeWidth="4.08"
|
|
156
|
+
transform="translate(112.486 110.241)"
|
|
157
|
+
>
|
|
158
|
+
<path d="M3.887.053a3.887 3.887 0 000 7.775h3.396"></path>
|
|
159
|
+
</g>
|
|
160
|
+
<g
|
|
161
|
+
stroke="#3B414D"
|
|
162
|
+
strokeLinecap="round"
|
|
163
|
+
strokeLinejoin="round"
|
|
164
|
+
strokeWidth="3.791"
|
|
165
|
+
transform="translate(147.003 64.237)"
|
|
166
|
+
>
|
|
167
|
+
<path d="M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"></path>
|
|
168
|
+
<path d="M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"></path>
|
|
169
|
+
</g>
|
|
170
|
+
<path
|
|
171
|
+
stroke="#3B414D"
|
|
172
|
+
strokeLinecap="round"
|
|
173
|
+
strokeWidth="3.791"
|
|
174
|
+
d="M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
|
|
175
|
+
></path>
|
|
176
|
+
<g fill="#B8E4F4">
|
|
177
|
+
<path d="M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"></path>
|
|
178
|
+
<path d="M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"></path>
|
|
179
|
+
<path d="M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
|
|
180
|
+
<path d="M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
|
|
181
|
+
</g>
|
|
182
|
+
</g>
|
|
183
|
+
</g>
|
|
184
|
+
</g>
|
|
185
|
+
</g>
|
|
186
|
+
</svg>
|
|
187
|
+
);
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
export default themeComponent(WalletIcon, "Icons", fallbackValues, "info");
|
|
@@ -23,6 +23,7 @@ import TimeoutImage from "./TimeoutImage";
|
|
|
23
23
|
import AutopayOnIcon from "./AutopayOnIcon";
|
|
24
24
|
import NotFoundIcon from "./NotFoundIcon";
|
|
25
25
|
import SearchIcon from "./SearchIcon";
|
|
26
|
+
import WalletIcon from "./WalletIcon";
|
|
26
27
|
|
|
27
28
|
export {
|
|
28
29
|
AccountsIcon,
|
|
@@ -49,5 +50,6 @@ export {
|
|
|
49
50
|
TimeoutImage,
|
|
50
51
|
AutopayOnIcon,
|
|
51
52
|
NotFoundIcon,
|
|
52
|
-
SearchIcon
|
|
53
|
+
SearchIcon,
|
|
54
|
+
WalletIcon
|
|
53
55
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { default as AddObligation } from "./add-obligation";
|
|
2
2
|
export { default as Alert } from "./alert";
|
|
3
3
|
export { default as AmountCallout } from "./amount-callout";
|
|
4
|
+
export { default as BoxWithShadow } from "./box-with-shadow";
|
|
4
5
|
export { default as Breadcrumb } from "./breadcrumb";
|
|
5
6
|
export { default as ButtonWithAction } from "./button-with-action";
|
|
6
7
|
export { default as ButtonWithLink } from "./button-with-link";
|
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
FormContainer,
|
|
6
6
|
FormInputColumn
|
|
7
7
|
} from "../../atoms/form-layouts";
|
|
8
|
+
import Paragraph from "../../atoms/paragraph";
|
|
8
9
|
import { noop } from "../../../util/general";
|
|
9
10
|
|
|
10
11
|
const EmailForm = ({
|
|
@@ -13,6 +14,7 @@ const EmailForm = ({
|
|
|
13
14
|
fields,
|
|
14
15
|
actions,
|
|
15
16
|
showErrors,
|
|
17
|
+
guestCheckout,
|
|
16
18
|
handleSubmit = noop
|
|
17
19
|
}) => {
|
|
18
20
|
if (clearOnDismount) {
|
|
@@ -25,6 +27,11 @@ const EmailForm = ({
|
|
|
25
27
|
|
|
26
28
|
return (
|
|
27
29
|
<FormContainer variant={variant} role="form" aria-label="Email">
|
|
30
|
+
{guestCheckout && (
|
|
31
|
+
<Paragraph margin="0 0 1.125rem 0">
|
|
32
|
+
If desired, you can create a wallet later for faster checkout
|
|
33
|
+
</Paragraph>
|
|
34
|
+
)}
|
|
28
35
|
<FormInputColumn>
|
|
29
36
|
<FormInput
|
|
30
37
|
labelTextWhenNoError="Email"
|
|
@@ -10,6 +10,8 @@ const PaymentButtonBar = ({
|
|
|
10
10
|
forwardButtonText = "Next",
|
|
11
11
|
forwardButtonAction,
|
|
12
12
|
forwardButtonLoading,
|
|
13
|
+
forwardButtonVariant = "primary",
|
|
14
|
+
backButtonVariant = "secondary",
|
|
13
15
|
backButtonAction,
|
|
14
16
|
cancelURL,
|
|
15
17
|
cancelText = "Cancel",
|
|
@@ -23,7 +25,7 @@ const PaymentButtonBar = ({
|
|
|
23
25
|
<ButtonWithLink
|
|
24
26
|
text={cancelText}
|
|
25
27
|
url={cancelURL}
|
|
26
|
-
variant=
|
|
28
|
+
variant={backButtonVariant}
|
|
27
29
|
extraStyles={isMobile && "flex-grow: 1"}
|
|
28
30
|
dataQa={cancelText}
|
|
29
31
|
/>
|
|
@@ -31,7 +33,7 @@ const PaymentButtonBar = ({
|
|
|
31
33
|
backButtonAction && (
|
|
32
34
|
<ButtonWithAction
|
|
33
35
|
text="Back"
|
|
34
|
-
variant=
|
|
36
|
+
variant={backButtonVariant}
|
|
35
37
|
action={backButtonAction}
|
|
36
38
|
extraStyles={isMobile && "flex-grow: 1"}
|
|
37
39
|
dataQa="Back"
|
|
@@ -43,7 +45,7 @@ const PaymentButtonBar = ({
|
|
|
43
45
|
<ButtonWithLink
|
|
44
46
|
url={redirectURL}
|
|
45
47
|
text={redirectText}
|
|
46
|
-
variant=
|
|
48
|
+
variant={forwardButtonVariant}
|
|
47
49
|
extraStyles={isMobile && "flex-grow: 1"}
|
|
48
50
|
dataQa={redirectText}
|
|
49
51
|
/>
|
|
@@ -51,7 +53,7 @@ const PaymentButtonBar = ({
|
|
|
51
53
|
forwardButtonAction && (
|
|
52
54
|
<ButtonWithAction
|
|
53
55
|
text={forwardButtonText}
|
|
54
|
-
variant=
|
|
56
|
+
variant={forwardButtonVariant}
|
|
55
57
|
action={forwardButtonAction}
|
|
56
58
|
isLoading={forwardButtonLoading}
|
|
57
59
|
extraStyles={isMobile && "flex-grow: 1"}
|
package/src/constants/colors.js
CHANGED
|
@@ -4,7 +4,7 @@ Need to add a new color? Visit http://chir.ag/projects/name-that-color to genera
|
|
|
4
4
|
Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
|
|
5
5
|
to the one generated by name-that-color.
|
|
6
6
|
*/
|
|
7
|
-
|
|
7
|
+
const BLACK = "#000000";
|
|
8
8
|
const TRANSPARENT = "transparent";
|
|
9
9
|
// WHITE
|
|
10
10
|
const WHITE = "#FFFFFF";
|
|
@@ -110,6 +110,7 @@ const ALERT_COLORS = {
|
|
|
110
110
|
};
|
|
111
111
|
|
|
112
112
|
export {
|
|
113
|
+
BLACK,
|
|
113
114
|
TRANSPARENT,
|
|
114
115
|
WHITE,
|
|
115
116
|
SOLITUDE_WHITE,
|