@thecb/components 4.5.0-beta.2 → 4.5.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/dist/index.cjs.js +418 -190
- package/package.json +1 -1
- package/src/components/atoms/detail/Detail.js +6 -4
- package/src/components/atoms/icons/CheckIcon.js +37 -0
- package/src/components/atoms/icons/PeriscopeFailedIcon.js +206 -0
- package/src/components/atoms/icons/index.js +5 -1
- package/src/components/atoms/jumbo/Jumbo.js +5 -5
- package/src/components/atoms/labeled-amount/LabeledAmount.js +10 -3
- package/src/components/atoms/labeled-amount/LabeledAmount.theme.js +1 -0
- package/src/components/atoms/line-item/LineItem.theme.js +1 -1
- package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js +1 -2
- package/src/components/molecules/module/Module.js +3 -1
- package/src/components/molecules/module/Module.theme.js +27 -9
- package/src/components/molecules/payment-details/PaymentDetails.js +7 -3
- package/src/components/molecules/payment-details/PaymentDetails.theme.js +2 -2
package/package.json
CHANGED
|
@@ -14,11 +14,13 @@ import { themeComponent } from "../../../util/themeUtils";
|
|
|
14
14
|
New responsive text component for Detail elements
|
|
15
15
|
(Block level text elements which are smaller than "Title" elements)
|
|
16
16
|
Size is decoupled from tag
|
|
17
|
-
Comes with
|
|
18
|
-
Large variant results in text that is 1.
|
|
19
|
-
|
|
17
|
+
Comes with four variants - "large", "regular", "small", "extraSmall"
|
|
18
|
+
Large variant results in text that is 1.125rem/1.1428rem (18px desktop, 16px mobile)
|
|
19
|
+
Regular variant results in text that is 1rem (16px desktop, 14px mobile)
|
|
20
|
+
Small variant reuslts in text that is 0.875rem/0.8571rem (14px desktop, 12px mobile)
|
|
21
|
+
ExtraSmall variant results in text that is 0.75rem/0.7142rem (12px desktop, 10px mobile)
|
|
20
22
|
|
|
21
|
-
If you need a
|
|
23
|
+
If you need a larger font size, use the <Title /> atom, which has larger variants
|
|
22
24
|
|
|
23
25
|
Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
|
|
24
26
|
If you need an inline text element (span), use the <Text /> atom
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const CheckIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width="32"
|
|
8
|
+
height="21"
|
|
9
|
+
viewBox="0 0 32 21"
|
|
10
|
+
>
|
|
11
|
+
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
|
|
12
|
+
<g fillRule="nonzero" transform="translate(-870 -426)">
|
|
13
|
+
<g transform="translate(132 332)">
|
|
14
|
+
<g transform="translate(0 70)">
|
|
15
|
+
<g transform="translate(738 24)">
|
|
16
|
+
<rect
|
|
17
|
+
width="32"
|
|
18
|
+
height="21"
|
|
19
|
+
x="0"
|
|
20
|
+
y="0"
|
|
21
|
+
fill="#CFE5F4"
|
|
22
|
+
rx="1"
|
|
23
|
+
></rect>
|
|
24
|
+
<path
|
|
25
|
+
fill="#184390"
|
|
26
|
+
d="M20.9 8.536a.292.292 0 00.213-.086.282.282 0 00.087-.209v-.295h.6c.05 0 .096-.02.137-.061A.186.186 0 0022 7.75v-.393c0-.082-.042-.139-.125-.172l-5.8-2.16a.127.127 0 00-.15 0l-5.8 2.16c-.083.033-.125.09-.125.172v.393c0 .05.02.094.063.135.041.041.087.061.137.061h.6v.295c0 .082.03.151.087.209.059.057.13.086.213.086h9.8zm.3 5.893v-.492a.282.282 0 00-.087-.208.292.292 0 00-.213-.086H20V8.929h-1.6v4.714h-1.6V8.929h-1.6v4.714h-1.6V8.929H12v4.714h-.9a.292.292 0 00-.213.086.282.282 0 00-.087.209v.49h10.4zM21.8 16c.05 0 .096-.02.137-.061a.186.186 0 00.063-.135v-.393a.563.563 0 00-.175-.418.584.584 0 00-.425-.172H10.6a.584.584 0 00-.425.172.563.563 0 00-.175.418v.393c0 .049.02.094.063.135.041.04.087.061.137.061h11.6z"
|
|
27
|
+
></path>
|
|
28
|
+
</g>
|
|
29
|
+
</g>
|
|
30
|
+
</g>
|
|
31
|
+
</g>
|
|
32
|
+
</g>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default CheckIcon;
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const PeriscopeFailedIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
8
|
+
width="632"
|
|
9
|
+
height="345"
|
|
10
|
+
viewBox="0 0 632 345"
|
|
11
|
+
>
|
|
12
|
+
<defs>
|
|
13
|
+
<path
|
|
14
|
+
id="periscope-failed-path-1"
|
|
15
|
+
d="M298.876 295.918v28.33a4.498 4.498 0 01-4.159 4.488l-.335.012h-17.978a4.498 4.498 0 01-4.494-4.5 4.498 4.498 0 014.16-4.489l.334-.012 13.484.002v-23.831h8.988zm17.978 0v23.83h13.483c2.37 0 4.31 1.835 4.482 4.164l.012.336a4.498 4.498 0 01-4.159 4.488l-.335.012H312.36a4.497 4.497 0 01-4.483-4.164l-.012-.336v-28.33h8.989zm224.157-92.063a4.498 4.498 0 014.495 4.501 4.498 4.498 0 01-4.16 4.488l-.335.013h-16.67L488.01 250.85a4.49 4.49 0 01-5.106.984l-.34-.173-29.755-16.502v-11.252l31.117 18.199 27.97-29.25h-7.963a4.498 4.498 0 01-4.495-4.5 4.498 4.498 0 014.16-4.488l.335-.013h37.078zm-325.5-32.5a4.501 4.501 0 013.294 5.444 28.718 28.718 0 00-.828 6.85c0 5.071 1.337 10.012 3.92 14.631a4.504 4.504 0 01-1.724 6.126 4.491 4.491 0 01-6.117-1.727 41.106 41.106 0 01-2.574-5.511l-65.128 26.791 5.331 2.199v10.126l-18.653-8.327-.34-.165c-3.227-1.723-3.128-6.474.23-8.035l.2-.088 76.159-31.329a37.7 37.7 0 01.794-13.686 4.494 4.494 0 015.436-3.299zm335.545-38.385a4 4 0 014 4v55.01a4 4 0 01-4 4h-54.921a4 4 0 01-4-4v-55.01a4 4 0 014-4h54.921z"
|
|
16
|
+
></path>
|
|
17
|
+
<filter
|
|
18
|
+
id="periscope-failed-filter-2"
|
|
19
|
+
width="111.3%"
|
|
20
|
+
height="124.5%"
|
|
21
|
+
x="-5.7%"
|
|
22
|
+
y="-12.3%"
|
|
23
|
+
filterUnits="objectBoundingBox"
|
|
24
|
+
>
|
|
25
|
+
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
|
26
|
+
<feGaussianBlur
|
|
27
|
+
in="shadowOffsetOuter1"
|
|
28
|
+
result="shadowBlurOuter1"
|
|
29
|
+
stdDeviation="8"
|
|
30
|
+
></feGaussianBlur>
|
|
31
|
+
<feColorMatrix
|
|
32
|
+
in="shadowBlurOuter1"
|
|
33
|
+
values="0 0 0 0 0.0823529412 0 0 0 0 0.454901961 0 0 0 0 0.615686275 0 0 0 0.5 0"
|
|
34
|
+
></feColorMatrix>
|
|
35
|
+
</filter>
|
|
36
|
+
<path
|
|
37
|
+
id="periscope-failed-path-3"
|
|
38
|
+
d="M151.685 24.754V37.13l-24.838.186a2 2 0 00-1.985 2v2.766a2 2 0 002.015 1.985l24.808-.186v7.876h-91.01V26.95a2 2 0 011.995-2l89.015-.196zM113.693 37.33h-38.41a2 2 0 00-2 2v2.751a2 2 0 002 2h38.41a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
|
|
39
|
+
></path>
|
|
40
|
+
<filter
|
|
41
|
+
id="periscope-failed-filter-4"
|
|
42
|
+
width="152.7%"
|
|
43
|
+
height="277.7%"
|
|
44
|
+
x="-26.4%"
|
|
45
|
+
y="-88.9%"
|
|
46
|
+
filterUnits="objectBoundingBox"
|
|
47
|
+
>
|
|
48
|
+
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
|
49
|
+
<feGaussianBlur
|
|
50
|
+
in="shadowOffsetOuter1"
|
|
51
|
+
result="shadowBlurOuter1"
|
|
52
|
+
stdDeviation="8"
|
|
53
|
+
></feGaussianBlur>
|
|
54
|
+
<feColorMatrix
|
|
55
|
+
in="shadowBlurOuter1"
|
|
56
|
+
values="0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
|
|
57
|
+
></feColorMatrix>
|
|
58
|
+
</filter>
|
|
59
|
+
<path
|
|
60
|
+
id="periscope-failed-path-5"
|
|
61
|
+
d="M452.809 0l124.97.196a2 2 0 011.996 2v27.305a2 2 0 01-2 2h-.003l-124.963-.196V19.128h9.236a2 2 0 002-2v-2.751a2 2 0 00-2-2h-9.236V0zm55.047 12.377h-32.679a2 2 0 00-2 2v2.75a2 2 0 002 2h32.679a2 2 0 002-2v-2.75a2 2 0 00-2-2zm25.217 0h-12.047a2 2 0 00-2 2v2.75a2 2 0 002 2h12.047a2 2 0 002-2v-2.75a2 2 0 00-2-2zm32.094 0h-18.924a2 2 0 00-2 2v2.75a2 2 0 002 2h18.924a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
|
|
62
|
+
></path>
|
|
63
|
+
<filter
|
|
64
|
+
id="periscope-failed-filter-6"
|
|
65
|
+
width="137.8%"
|
|
66
|
+
height="252.4%"
|
|
67
|
+
x="-18.9%"
|
|
68
|
+
y="-76.2%"
|
|
69
|
+
filterUnits="objectBoundingBox"
|
|
70
|
+
>
|
|
71
|
+
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
|
72
|
+
<feGaussianBlur
|
|
73
|
+
in="shadowOffsetOuter1"
|
|
74
|
+
result="shadowBlurOuter1"
|
|
75
|
+
stdDeviation="8"
|
|
76
|
+
></feGaussianBlur>
|
|
77
|
+
<feColorMatrix
|
|
78
|
+
in="shadowBlurOuter1"
|
|
79
|
+
values="0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
|
|
80
|
+
></feColorMatrix>
|
|
81
|
+
</filter>
|
|
82
|
+
<path
|
|
83
|
+
id="periscope-failed-path-7"
|
|
84
|
+
d="M180.022 51.757a2 2 0 012 2v27.505a2 2 0 01-2 2H2a2 2 0 01-2-2V53.757a2 2 0 012-2h178.022zm-141.7 12.377h-23.65a2 2 0 00-2 2v2.751a2 2 0 002 2h23.65a2 2 0 002-2v-2.75a2 2 0 00-2-2zm25.344 0H51.538a2 2 0 00-2 2v2.751a2 2 0 002 2h12.128a2 2 0 002-2v-2.75a2 2 0 00-2-2zm56.45 0H76.883a2 2 0 00-2 2v2.751a2 2 0 002 2h43.233a2 2 0 002-2v-2.75a2 2 0 00-2-2zm47.234 0h-34.017a2 2 0 00-2 2v2.751a2 2 0 002 2h34.017a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
|
|
85
|
+
></path>
|
|
86
|
+
<filter
|
|
87
|
+
id="periscope-failed-filter-8"
|
|
88
|
+
width="126.4%"
|
|
89
|
+
height="252.4%"
|
|
90
|
+
x="-13.2%"
|
|
91
|
+
y="-76.2%"
|
|
92
|
+
filterUnits="objectBoundingBox"
|
|
93
|
+
>
|
|
94
|
+
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
|
95
|
+
<feGaussianBlur
|
|
96
|
+
in="shadowOffsetOuter1"
|
|
97
|
+
result="shadowBlurOuter1"
|
|
98
|
+
stdDeviation="8"
|
|
99
|
+
></feGaussianBlur>
|
|
100
|
+
<feColorMatrix
|
|
101
|
+
in="shadowBlurOuter1"
|
|
102
|
+
values="0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
|
|
103
|
+
></feColorMatrix>
|
|
104
|
+
</filter>
|
|
105
|
+
<path
|
|
106
|
+
id="periscope-failed-path-9"
|
|
107
|
+
d="M598 27.004a2 2 0 012 2v27.504a2 2 0 01-2 2h-42.944V46.13h30.272a2 2 0 001.994-1.85l.006-.15v-2.75a2 2 0 00-2-2H554.97l-.041-.176a4.002 4.002 0 00-3.674-2.994l-.2-.005h-54.921a4 4 0 00-3.995 3.8l-.005.2v18.302h-72.157a2 2 0 01-2-2V29.004a2 2 0 012-2H598zM456.299 39.38H432.65a2 2 0 00-2 2v2.75a2 2 0 002 2h23.649a2 2 0 002-2v-2.75a2 2 0 00-2-2zm25.345 0h-12.129a2 2 0 00-2 2v2.75a2 2 0 002 2h12.129a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
|
|
108
|
+
></path>
|
|
109
|
+
<filter
|
|
110
|
+
id="periscope-failed-filter-10"
|
|
111
|
+
width="126.4%"
|
|
112
|
+
height="252.4%"
|
|
113
|
+
x="-13.2%"
|
|
114
|
+
y="-76.2%"
|
|
115
|
+
filterUnits="objectBoundingBox"
|
|
116
|
+
>
|
|
117
|
+
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
|
118
|
+
<feGaussianBlur
|
|
119
|
+
in="shadowOffsetOuter1"
|
|
120
|
+
result="shadowBlurOuter1"
|
|
121
|
+
stdDeviation="8"
|
|
122
|
+
></feGaussianBlur>
|
|
123
|
+
<feColorMatrix
|
|
124
|
+
in="shadowBlurOuter1"
|
|
125
|
+
values="0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
|
|
126
|
+
></feColorMatrix>
|
|
127
|
+
</filter>
|
|
128
|
+
</defs>
|
|
129
|
+
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
|
|
130
|
+
<g transform="translate(-404 -259)">
|
|
131
|
+
<g transform="translate(132 195)">
|
|
132
|
+
<g transform="translate(288 64)">
|
|
133
|
+
<path
|
|
134
|
+
fill="#15749D"
|
|
135
|
+
fillOpacity="0.3"
|
|
136
|
+
d="M302.247 310.746c36.612 0 66.292 6.549 66.292 14.627S338.86 340 302.247 340c-36.613 0-66.292-6.55-66.292-14.627 0-8.078 29.68-14.627 66.292-14.627zM65.904 208.318c6.071 0 11.057 4.655 11.608 10.6a6.983 6.983 0 014.09-1.321c3.885 0 7.034 3.159 7.034 7.055 0 3.818-3.022 6.926-6.798 7.051l-.237.004H49.756c-4.548 0-8.234-3.696-8.234-8.256 0-4.56 3.686-8.257 8.234-8.257 1.848 0 3.549.618 4.923 1.65 1.378-4.919 5.88-8.526 11.225-8.526zm195.894-57.546c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.134 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm80.899 0c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.135 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm-80.899 22.503c-5.514 0-10.317 3.673-12.173 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.658-9.018-12.172-9.018zm80.9 0c-5.515 0-10.318 3.673-12.174 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.659-9.018-12.172-9.018zM519.99 12.426c12.578 0 22.908 9.642 24.048 21.958a14.473 14.473 0 018.471-2.737c8.049 0 14.575 6.544 14.575 14.617 0 7.966-6.358 14.445-14.262 14.612l-.313.003H486.54c-9.42 0-17.057-7.658-17.057-17.106 0-9.446 7.637-17.104 17.057-17.104 3.83 0 7.352 1.281 10.2 3.418 2.855-10.189 12.179-17.66 23.252-17.66zM170.591 0c6.61 0 12.239 4.15 14.476 9.99a6.571 6.571 0 011.792-.252c2.114 0 3.994.996 5.208 2.543a9.767 9.767 0 014.028-.872c5.431 0 9.833 4.414 9.833 9.86 0 5.354-4.254 9.712-9.557 9.858l-.276.004h-42.442c-5.43 0-9.833-4.415-9.833-9.861 0-5.447 4.403-9.861 9.833-9.861.666 0 1.315.068 1.942.194C157.345 4.93 163.386 0 170.59 0z"
|
|
137
|
+
></path>
|
|
138
|
+
<path
|
|
139
|
+
fill="#FFF"
|
|
140
|
+
d="M446.067 111.391v175.276a2.5 2.5 0 01-2.5 2.5h-282.64a2.5 2.5 0 01-2.5-2.5V111.39h287.64zm-184.27 39.38c-16.133 0-29.213 13.098-29.213 29.255 0 16.157 13.08 29.254 29.214 29.254s29.213-13.097 29.213-29.254c0-16.157-13.08-29.254-29.213-29.254zm80.9 0c-16.135 0-29.214 13.098-29.214 29.255 0 16.157 13.08 29.254 29.214 29.254s29.213-13.097 29.213-29.254c0-16.157-13.08-29.254-29.213-29.254z"
|
|
141
|
+
></path>
|
|
142
|
+
<path
|
|
143
|
+
fill="#292A33"
|
|
144
|
+
fillRule="nonzero"
|
|
145
|
+
d="M452.808 155.272v111.39l73.035.002a4.498 4.498 0 014.494 4.5 4.498 4.498 0 01-4.159 4.488l-.335.013-73.035-.001.001 7.877c0 6.733-5.37 12.211-12.055 12.373l-.305.004H164.045c-6.724 0-12.194-5.377-12.356-12.072l-.004-.305v-7.877H94.381a4.498 4.498 0 01-4.494-4.5 4.498 4.498 0 014.159-4.488l.335-.012 57.302-.001.001-44.897 6.741-2.773.001 64.548a5.622 5.622 0 005.397 5.622l.22.004H440.45c3.03 0 5.498-2.4 5.614-5.405l.004-.221v-128.27h6.741zm129.214 111.392a4.498 4.498 0 014.495 4.5 4.498 4.498 0 01-4.16 4.488l-.335.013h-33.707a4.498 4.498 0 01-4.495-4.5 4.498 4.498 0 014.16-4.49l.335-.011h33.707zm-507.865 0a4.498 4.498 0 014.495 4.5 4.498 4.498 0 01-4.16 4.488l-.335.013H56.18a4.498 4.498 0 01-4.495-4.5 4.498 4.498 0 014.16-4.49l.335-.011h17.977zm242.477-33.13l.478.01c6.182.271 10.978 5.775 10.978 12.367a3.373 3.373 0 01-3.37 3.375c-1.8 0-3.27-1.412-3.367-3.19l-.005-.185-.011-.394c-.167-2.905-2.173-5.107-4.503-5.227l-.2-.005h-31.022l-.313.012c-2.384.193-4.4 2.564-4.4 5.614a3.373 3.373 0 01-3.37 3.375 3.373 3.373 0 01-3.372-3.375c0-6.657 4.89-12.204 11.16-12.373l.295-.004h31.022zm26.063-89.513c19.858 0 35.955 16.119 35.955 36.004 0 19.886-16.097 36.006-35.955 36.006-18.994 0-34.546-14.746-35.865-33.43l-9.166-.061c-1.288 18.712-16.854 33.491-35.868 33.491-19.857 0-35.955-16.12-35.955-36.006 0-19.885 16.097-36.004 35.955-36.004 13.281 0 24.88 7.21 31.106 17.934 3.515-1.212 6.847-1.818 9.994-1.818 2.95 0 5.89.533 8.822 1.6 6.255-10.605 17.786-17.716 30.977-17.716zm-184.27 36.005v29.234l-6.742 2.773v-32.007h6.741zm184.27-29.254c-16.135 0-29.214 13.096-29.214 29.253 0 16.158 13.079 29.255 29.214 29.255 16.135 0 29.213-13.097 29.213-29.255 0-16.157-13.078-29.253-29.213-29.253zm-80.899 0c-16.134 0-29.214 13.097-29.214 29.253 0 16.157 13.08 29.255 29.214 29.255 16.135 0 29.213-13.097 29.213-29.255 0-16.157-13.078-29.253-29.213-29.253zm0 22.503c5.514 0 10.317 3.673 12.172 9.018a3.377 3.377 0 01-2.077 4.297 3.37 3.37 0 01-4.17-1.778l-.12-.302c-.942-2.713-3.258-4.484-5.805-4.484-2.413 0-4.619 1.59-5.645 4.064l-.16.42a3.37 3.37 0 01-4.29 2.08 3.377 3.377 0 01-2.078-4.297c1.856-5.345 6.66-9.018 12.173-9.018zm80.9 0c5.512 0 10.316 3.673 12.171 9.018a3.377 3.377 0 01-2.077 4.297 3.37 3.37 0 01-4.17-1.778l-.12-.302c-.942-2.713-3.258-4.484-5.805-4.484-2.413 0-4.619 1.59-5.645 4.064l-.16.42a3.37 3.37 0 01-4.291 2.08 3.377 3.377 0 01-2.077-4.297c1.856-5.345 6.66-9.018 12.173-9.018zm-40.45-8.638a3.374 3.374 0 00-3.372 3.376 3.374 3.374 0 003.372 3.375c1.861 0 3.37-1.51 3.37-3.375a3.373 3.373 0 00-3.37-3.376zM440.45 68.635c6.725 0 12.195 5.377 12.356 12.072l.004.305-.002 23.465h.002v6.751h-.002l.001 12.539h-6.74l-.002-12.54h-287.64v37.294h-6.74V81.01c0-6.733 5.369-12.21 12.054-12.372l.305-.004h276.404zm0 6.75H164.045a5.622 5.622 0 00-5.614 5.406l-.004.22v23.466h287.64V81.012a5.622 5.622 0 00-5.397-5.622l-.22-.004zM173.034 85.513l.211.005a4.498 4.498 0 014.283 4.496c0 2.486-2.012 4.5-4.494 4.5a4.498 4.498 0 01-4.495-4.5c0-2.486 2.013-4.5 4.495-4.5zm13.483 0l.211.005a4.498 4.498 0 014.283 4.496c0 2.486-2.012 4.5-4.494 4.5a4.498 4.498 0 01-4.495-4.5c0-2.486 2.013-4.5 4.495-4.5zm13.483 0l.212.005a4.498 4.498 0 014.282 4.496c0 2.486-2.012 4.5-4.494 4.5a4.498 4.498 0 01-4.494-4.5c0-2.486 2.012-4.5 4.494-4.5z"
|
|
146
|
+
></path>
|
|
147
|
+
<path
|
|
148
|
+
fill="#CACED8"
|
|
149
|
+
d="M38.321 160.898a2 2 0 012 2v2.751a2 2 0 01-2 2H14.672a2 2 0 01-2-2v-2.75a2 2 0 012-2h23.65zm25.345 0a2 2 0 012 2v2.751a2 2 0 01-2 2H51.538a2 2 0 01-2-2v-2.75a2 2 0 012-2h12.128zm56.45 0a2 2 0 012 2v2.751a2 2 0 01-2 2H76.883a2 2 0 01-2-2v-2.75a2 2 0 012-2h43.233zm47.234 0a2 2 0 012 2v2.751a2 2 0 01-2 2h-34.017a2 2 0 01-2-2v-2.75a2 2 0 012-2h34.017zm288.949-24.753a2 2 0 012 2v2.75a2 2 0 01-2 2H432.65a2 2 0 01-2-2v-2.75a2 2 0 012-2h23.649zm25.345 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-12.129a2 2 0 01-2-2v-2.75a2 2 0 012-2h12.129zm103.684 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-30.273l.001-5.925c0-.283-.03-.56-.085-.826h30.357zm-471.635-2.05a2 2 0 012 2v2.751a2 2 0 01-2 2h-38.41a2 2 0 01-2-2v-2.75a2 2 0 012-2h38.41zm37.992-.2v6.75l-24.808.186a2 2 0 01-2.015-1.985v-2.766a2 2 0 011.985-2l24.838-.186zm356.171-24.754a2 2 0 012 2v2.75a2 2 0 01-2 2h-32.679a2 2 0 01-2-2v-2.75a2 2 0 012-2h32.679zm-45.811 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-9.236v-6.75h9.236zm71.028 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-12.047a2 2 0 01-2-2v-2.75a2 2 0 012-2h12.047zm32.094 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-18.924a2 2 0 01-2-2v-2.75a2 2 0 012-2h18.924zm-121.6-33.755a2.5 2.5 0 012.5 2.5v26.754h-287.64V77.886a2.5 2.5 0 012.5-2.5h282.64zM173.034 85.512a4.498 4.498 0 00-4.495 4.501c0 2.486 2.013 4.5 4.495 4.5a4.498 4.498 0 004.494-4.5c0-2.486-2.012-4.5-4.494-4.5zm13.483 0a4.498 4.498 0 00-4.495 4.501c0 2.486 2.013 4.5 4.495 4.5a4.498 4.498 0 004.494-4.5c0-2.486-2.012-4.5-4.494-4.5zm13.483 0a4.498 4.498 0 00-4.494 4.501c0 2.486 2.012 4.5 4.494 4.5a4.498 4.498 0 004.494-4.5c0-2.486-2.012-4.5-4.494-4.5z"
|
|
150
|
+
></path>
|
|
151
|
+
<g>
|
|
152
|
+
<use
|
|
153
|
+
fill="#000"
|
|
154
|
+
filter="url(#periscope-failed-filter-2)"
|
|
155
|
+
xlinkHref="#periscope-failed-path-1"
|
|
156
|
+
></use>
|
|
157
|
+
<use fill="#15749D" xlinkHref="#periscope-failed-path-1"></use>
|
|
158
|
+
</g>
|
|
159
|
+
<g transform="translate(0 96.764)">
|
|
160
|
+
<g>
|
|
161
|
+
<use
|
|
162
|
+
fill="#000"
|
|
163
|
+
filter="url(#periscope-failed-filter-4)"
|
|
164
|
+
xlinkHref="#periscope-failed-path-3"
|
|
165
|
+
></use>
|
|
166
|
+
<use fill="#FFF" xlinkHref="#periscope-failed-path-3"></use>
|
|
167
|
+
</g>
|
|
168
|
+
<g>
|
|
169
|
+
<use
|
|
170
|
+
fill="#000"
|
|
171
|
+
filter="url(#periscope-failed-filter-6)"
|
|
172
|
+
xlinkHref="#periscope-failed-path-5"
|
|
173
|
+
></use>
|
|
174
|
+
<use fill="#FFF" xlinkHref="#periscope-failed-path-5"></use>
|
|
175
|
+
</g>
|
|
176
|
+
<g>
|
|
177
|
+
<use
|
|
178
|
+
fill="#000"
|
|
179
|
+
filter="url(#periscope-failed-filter-8)"
|
|
180
|
+
xlinkHref="#periscope-failed-path-7"
|
|
181
|
+
></use>
|
|
182
|
+
<use fill="#FFF" xlinkHref="#periscope-failed-path-7"></use>
|
|
183
|
+
</g>
|
|
184
|
+
<g>
|
|
185
|
+
<use
|
|
186
|
+
fill="#000"
|
|
187
|
+
filter="url(#periscope-failed-filter-10)"
|
|
188
|
+
xlinkHref="#periscope-failed-path-9"
|
|
189
|
+
></use>
|
|
190
|
+
<use fill="#FFF" xlinkHref="#periscope-failed-path-9"></use>
|
|
191
|
+
</g>
|
|
192
|
+
<path
|
|
193
|
+
fill="#FFF"
|
|
194
|
+
d="M524.284 47.541a3 3 0 013 3v13.002h13a3 3 0 013 3v2.002a3 3 0 01-3 3h-13v13.002a3 3 0 01-3 3h-2a3 3 0 01-3-3V71.544h-13a3 3 0 01-3-3v-2a3 3 0 013-3h13V50.54a3 3 0 013-3h2z"
|
|
195
|
+
transform="rotate(45 523.284 67.544)"
|
|
196
|
+
></path>
|
|
197
|
+
</g>
|
|
198
|
+
</g>
|
|
199
|
+
</g>
|
|
200
|
+
</g>
|
|
201
|
+
</g>
|
|
202
|
+
</svg>
|
|
203
|
+
);
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
export default PeriscopeFailedIcon;
|
|
@@ -51,6 +51,8 @@ import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
|
|
|
51
51
|
import CustomerSearchIcon from "./CustomerSearchIcon";
|
|
52
52
|
import PaymentSearchIcon from "./PaymentSearchIcon";
|
|
53
53
|
import ResetPasswordIcon from "./ResetPasswordIcon";
|
|
54
|
+
import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
|
|
55
|
+
import CheckIcon from "./CheckIcon";
|
|
54
56
|
|
|
55
57
|
export {
|
|
56
58
|
AccountsIcon,
|
|
@@ -105,5 +107,7 @@ export {
|
|
|
105
107
|
NoPaymentResultsIcon,
|
|
106
108
|
CustomerSearchIcon,
|
|
107
109
|
PaymentSearchIcon,
|
|
108
|
-
ResetPasswordIcon
|
|
110
|
+
ResetPasswordIcon,
|
|
111
|
+
PeriscopeFailedIcon,
|
|
112
|
+
CheckIcon
|
|
109
113
|
};
|
|
@@ -4,6 +4,7 @@ import { ThemeContext } from "styled-components";
|
|
|
4
4
|
import ButtonWithLink from "../button-with-link";
|
|
5
5
|
import { Box, Cluster, Center, Cover, Switcher } from "../layouts";
|
|
6
6
|
import Heading from "../heading";
|
|
7
|
+
import Title from "../title";
|
|
7
8
|
import withWindowSize from "../../withWindowSize";
|
|
8
9
|
|
|
9
10
|
const Jumbo = ({
|
|
@@ -49,16 +50,15 @@ const Jumbo = ({
|
|
|
49
50
|
align="center"
|
|
50
51
|
nowrap={showCartStatus}
|
|
51
52
|
>
|
|
52
|
-
<
|
|
53
|
-
variant={isMobile ? "
|
|
53
|
+
<Title
|
|
54
|
+
variant={isMobile ? "small" : "large"}
|
|
55
|
+
as="h1"
|
|
54
56
|
color="#ffffff"
|
|
55
57
|
className="themeJumboHeading"
|
|
56
|
-
themeJumboHeading
|
|
57
58
|
extraStyles={showCartStatus && isMobile && `max-width: 60%;`}
|
|
58
59
|
>
|
|
59
60
|
{heading}
|
|
60
|
-
</
|
|
61
|
-
|
|
61
|
+
</Title>
|
|
62
62
|
{subHeading && (
|
|
63
63
|
<Heading
|
|
64
64
|
variant={isMobile ? "h6" : "h2"}
|
|
@@ -5,7 +5,14 @@ import { Stack } from "../layouts";
|
|
|
5
5
|
import Heading from "../heading";
|
|
6
6
|
import Paragraph from "../paragraph";
|
|
7
7
|
|
|
8
|
-
const LabeledAmount = ({
|
|
8
|
+
const LabeledAmount = ({
|
|
9
|
+
variant = "pL",
|
|
10
|
+
label,
|
|
11
|
+
amount,
|
|
12
|
+
themeValues,
|
|
13
|
+
as,
|
|
14
|
+
extraStyles
|
|
15
|
+
}) => {
|
|
9
16
|
const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
|
|
10
17
|
return (
|
|
11
18
|
<Stack direction="row">
|
|
@@ -13,7 +20,7 @@ const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
|
|
|
13
20
|
variant={variant}
|
|
14
21
|
as={as}
|
|
15
22
|
weight={themeValues.fontWeight}
|
|
16
|
-
extraStyles=
|
|
23
|
+
extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
|
|
17
24
|
>
|
|
18
25
|
{label}:
|
|
19
26
|
</LabeledAmountText>
|
|
@@ -21,7 +28,7 @@ const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
|
|
|
21
28
|
variant={variant}
|
|
22
29
|
as={as}
|
|
23
30
|
weight={themeValues.fontWeight}
|
|
24
|
-
extraStyles=
|
|
31
|
+
extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
|
|
25
32
|
>
|
|
26
33
|
{amount}
|
|
27
34
|
</LabeledAmountText>
|
|
@@ -52,7 +52,6 @@ const InternalUserInfoForm = ({
|
|
|
52
52
|
roleDisabled,
|
|
53
53
|
selectionDisabled,
|
|
54
54
|
formType,
|
|
55
|
-
isOktaUser,
|
|
56
55
|
openChangePasswordForm,
|
|
57
56
|
firstName,
|
|
58
57
|
lastName
|
|
@@ -172,7 +171,7 @@ const InternalUserInfoForm = ({
|
|
|
172
171
|
onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
|
|
173
172
|
disabled={emailDisabled}
|
|
174
173
|
/>
|
|
175
|
-
{formType === PROFILE &&
|
|
174
|
+
{formType === PROFILE && (
|
|
176
175
|
<FormInput
|
|
177
176
|
labelTextWhenNoError="Password"
|
|
178
177
|
errorMessages={{}}
|
|
@@ -16,7 +16,9 @@ const Module = ({
|
|
|
16
16
|
<Fragment>
|
|
17
17
|
{heading && (
|
|
18
18
|
<Heading
|
|
19
|
-
variant={
|
|
19
|
+
variant={
|
|
20
|
+
variant === "small" ? "h6" : variant === "default" ? "h5" : "h2"
|
|
21
|
+
}
|
|
20
22
|
weight={themeValues.fontWeight}
|
|
21
23
|
color={themeValues.fontColor}
|
|
22
24
|
margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
|
|
@@ -1,20 +1,38 @@
|
|
|
1
1
|
import { WHITE, CHARADE_GREY } from "../../../constants/colors";
|
|
2
2
|
|
|
3
|
-
const fontSize = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
const
|
|
3
|
+
const fontSize = {
|
|
4
|
+
default: "1.375rem",
|
|
5
|
+
largeTitle: "1.75rem",
|
|
6
|
+
small: "1.25rem"
|
|
7
|
+
};
|
|
8
|
+
const fontWeight = { default: "600", largeTitle: "700", small: "600" };
|
|
9
|
+
const fontColor = {
|
|
10
|
+
default: CHARADE_GREY,
|
|
11
|
+
largeTitle: CHARADE_GREY,
|
|
12
|
+
small: CHARADE_GREY
|
|
13
|
+
};
|
|
14
|
+
const lineHeight = { default: "2rem", largeTitle: "2rem", small: "2rem" };
|
|
15
|
+
const textAlign = { default: "left", largeTitle: "left", small: "left" };
|
|
16
|
+
const titleType = { default: "h5", largeTitle: "h1", small: "h6" };
|
|
17
|
+
const titleSpacing = {
|
|
18
|
+
default: "0.5rem",
|
|
19
|
+
largeTitle: "1.125rem",
|
|
20
|
+
small: "0.5rem"
|
|
21
|
+
};
|
|
10
22
|
const boxShadow = {
|
|
11
23
|
default:
|
|
12
24
|
"0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
|
|
13
25
|
largeTitle:
|
|
26
|
+
"0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
|
|
27
|
+
small:
|
|
14
28
|
"0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
|
|
15
29
|
};
|
|
16
|
-
const borderRadius = {
|
|
17
|
-
|
|
30
|
+
const borderRadius = {
|
|
31
|
+
default: "0.25rem",
|
|
32
|
+
largeTitle: "0.25rem",
|
|
33
|
+
small: "0.25rem"
|
|
34
|
+
};
|
|
35
|
+
const backgroundColor = { default: WHITE, largeTitle: WHITE, small: WHITE };
|
|
18
36
|
|
|
19
37
|
export const fallbackValues = {
|
|
20
38
|
fontSize,
|
|
@@ -10,12 +10,14 @@ import LabeledAmount from "../../atoms/labeled-amount";
|
|
|
10
10
|
import LineItem from "../../atoms/line-item";
|
|
11
11
|
import Heading from "../../atoms/heading";
|
|
12
12
|
import SolidDivider from "../../atoms/solid-divider";
|
|
13
|
+
import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
|
|
13
14
|
|
|
14
15
|
const PaymentDetailsContent = ({
|
|
15
16
|
lineItemElems,
|
|
16
17
|
feeElems,
|
|
17
18
|
subtotal,
|
|
18
19
|
total,
|
|
20
|
+
variant,
|
|
19
21
|
themeValues
|
|
20
22
|
}) => (
|
|
21
23
|
<Stack childGap="16px">
|
|
@@ -31,10 +33,11 @@ const PaymentDetailsContent = ({
|
|
|
31
33
|
</Box>
|
|
32
34
|
<SolidDivider />
|
|
33
35
|
<LabeledAmount
|
|
34
|
-
as="
|
|
36
|
+
as="p"
|
|
35
37
|
variant={themeValues.labeledAmountTotal}
|
|
36
38
|
label="Total"
|
|
37
39
|
amount={displayCurrency(total)}
|
|
40
|
+
extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
|
|
38
41
|
/>
|
|
39
42
|
</Stack>
|
|
40
43
|
);
|
|
@@ -74,6 +77,7 @@ const PaymentDetails = ({
|
|
|
74
77
|
fees: _fees,
|
|
75
78
|
subtotal,
|
|
76
79
|
total,
|
|
80
|
+
variant = "default",
|
|
77
81
|
hideTitle = false,
|
|
78
82
|
titleText = "Payment Details",
|
|
79
83
|
initiallyOpen = false,
|
|
@@ -113,12 +117,12 @@ const PaymentDetails = ({
|
|
|
113
117
|
<SolidDivider />
|
|
114
118
|
<Box padding="8px" />
|
|
115
119
|
<PaymentDetailsContent
|
|
116
|
-
{...{ lineItemElems, feeElems, subtotal, total, themeValues }}
|
|
120
|
+
{...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
|
|
117
121
|
/>
|
|
118
122
|
</Stack>
|
|
119
123
|
) : (
|
|
120
124
|
<PaymentDetailsContent
|
|
121
|
-
{...{ lineItemElems, feeElems, subtotal, total, themeValues }}
|
|
125
|
+
{...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
|
|
122
126
|
/>
|
|
123
127
|
);
|
|
124
128
|
const title = hideTitle ? (
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const backgroundColor = { default: "transparent", small: "transparent" };
|
|
2
2
|
const lineItem = { default: "default", small: "small" };
|
|
3
|
-
const labeledAmountSubtotal = { default: "pL", small: "
|
|
4
|
-
const labeledAmountTotal = { default: "h6", small: "
|
|
3
|
+
const labeledAmountSubtotal = { default: "pL", small: "pS" };
|
|
4
|
+
const labeledAmountTotal = { default: "h6", small: "p" };
|
|
5
5
|
|
|
6
6
|
export const fallbackValues = {
|
|
7
7
|
backgroundColor,
|