@thecb/components 10.4.0-beta.3 → 10.4.0-beta.5
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 +13 -18
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +13 -18
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/badge/Badge.theme.js +2 -2
- package/src/components/atoms/placeholder/Placeholder.js +73 -86
- package/src/components/molecules/obligation/modules/PaymentDetailsActions.js +4 -10
package/package.json
CHANGED
|
@@ -17,7 +17,6 @@ import {
|
|
|
17
17
|
PaymentMethodAddIcon
|
|
18
18
|
} from "../icons";
|
|
19
19
|
import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
|
|
20
|
-
import { noop } from "../../../util/general";
|
|
21
20
|
|
|
22
21
|
const getLargeIcon = iconName => {
|
|
23
22
|
switch (iconName) {
|
|
@@ -37,27 +36,21 @@ const PlaceholderContentWrapper = ({
|
|
|
37
36
|
action,
|
|
38
37
|
destination,
|
|
39
38
|
children,
|
|
40
|
-
dataQa
|
|
41
|
-
disabled = false
|
|
39
|
+
dataQa
|
|
42
40
|
}) =>
|
|
43
41
|
isLink ? (
|
|
44
42
|
<Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
|
|
45
|
-
<Box
|
|
46
|
-
padding="0"
|
|
47
|
-
minHeight="100%"
|
|
48
|
-
extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
|
|
49
|
-
>
|
|
43
|
+
<Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
|
|
50
44
|
{children}
|
|
51
45
|
</Box>
|
|
52
46
|
</Link>
|
|
53
47
|
) : (
|
|
54
48
|
<Box
|
|
55
|
-
onClick={
|
|
49
|
+
onClick={action}
|
|
56
50
|
padding="0"
|
|
57
51
|
minHeight="100%"
|
|
52
|
+
extraStyles={`cursor: pointer;`}
|
|
58
53
|
dataQa={dataQa}
|
|
59
|
-
aria-disabled={disabled}
|
|
60
|
-
extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
|
|
61
54
|
>
|
|
62
55
|
{children}
|
|
63
56
|
</Box>
|
|
@@ -72,26 +65,21 @@ const Placeholder = ({
|
|
|
72
65
|
variant,
|
|
73
66
|
largeIcon,
|
|
74
67
|
themeValues,
|
|
75
|
-
dataQa
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
borderRadius="4px"
|
|
91
|
-
border="none"
|
|
92
|
-
minHeight={themeValues.height}
|
|
93
|
-
hiddenStyles={!visible}
|
|
94
|
-
extraStyles={`
|
|
68
|
+
dataQa
|
|
69
|
+
}) => (
|
|
70
|
+
<PlaceholderContentWrapper
|
|
71
|
+
isLink={isLink}
|
|
72
|
+
action={action}
|
|
73
|
+
destination={destination}
|
|
74
|
+
dataQa={dataQa}
|
|
75
|
+
>
|
|
76
|
+
<Box
|
|
77
|
+
padding="0"
|
|
78
|
+
borderRadius="4px"
|
|
79
|
+
border="none"
|
|
80
|
+
minHeight={themeValues.height}
|
|
81
|
+
hiddenStyles={!visible}
|
|
82
|
+
extraStyles={`
|
|
95
83
|
background: linear-gradient(
|
|
96
84
|
to right,
|
|
97
85
|
${variant === "large" ? STORM_GREY : themeValues.color} 40%,
|
|
@@ -112,22 +100,22 @@ const Placeholder = ({
|
|
|
112
100
|
display: flex;
|
|
113
101
|
justify-content: center;
|
|
114
102
|
align-items:center;`}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
103
|
+
hoverStyles={`background-color: ${
|
|
104
|
+
variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
|
|
105
|
+
};`}
|
|
106
|
+
>
|
|
107
|
+
<Center maxWidth="300px">
|
|
108
|
+
<Box
|
|
109
|
+
padding="0"
|
|
110
|
+
tabIndex="0"
|
|
111
|
+
onKeyPress={e => e.key === "Enter" && action()}
|
|
112
|
+
>
|
|
113
|
+
<Cluster justify="center" align="center" minHeight="100%">
|
|
114
|
+
<Switcher maxChildren={2} childGap="0">
|
|
115
|
+
{variant === "large" && <div></div>}
|
|
116
|
+
<Box
|
|
117
|
+
padding="0"
|
|
118
|
+
extraStyles={`.fill {
|
|
131
119
|
fill: ${
|
|
132
120
|
variant === "large" ? CHARADE_GREY : themeValues.color
|
|
133
121
|
};
|
|
@@ -136,45 +124,44 @@ const Placeholder = ({
|
|
|
136
124
|
variant === "large" ? CHARADE_GREY : themeValues.color
|
|
137
125
|
};
|
|
138
126
|
}`}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
};
|
|
127
|
+
>
|
|
128
|
+
{variant === "large" ? (
|
|
129
|
+
<Center intrinsic>
|
|
130
|
+
{getLargeIcon(largeIcon)}
|
|
131
|
+
<Text
|
|
132
|
+
variant="pS"
|
|
133
|
+
color={themeValues.color}
|
|
134
|
+
weight={FONT_WEIGHT_REGULAR}
|
|
135
|
+
extraStyles={`text-align: center;`}
|
|
136
|
+
>
|
|
137
|
+
{text}
|
|
138
|
+
</Text>
|
|
139
|
+
</Center>
|
|
140
|
+
) : (
|
|
141
|
+
<Cover singleChild minHeight="100%">
|
|
142
|
+
<Cluster justify="center" align="center">
|
|
143
|
+
<IconAdd />
|
|
144
|
+
<Center intrinsic>
|
|
145
|
+
<Text
|
|
146
|
+
variant="pS"
|
|
147
|
+
color={themeValues.color}
|
|
148
|
+
weight={FONT_WEIGHT_REGULAR}
|
|
149
|
+
extraStyles={`padding: 0 0 0 8px; text-align: center;`}
|
|
150
|
+
>
|
|
151
|
+
{text}
|
|
152
|
+
</Text>
|
|
153
|
+
</Center>
|
|
154
|
+
</Cluster>
|
|
155
|
+
</Cover>
|
|
156
|
+
)}
|
|
157
|
+
</Box>
|
|
158
|
+
</Switcher>
|
|
159
|
+
</Cluster>
|
|
160
|
+
</Box>
|
|
161
|
+
</Center>
|
|
162
|
+
</Box>
|
|
163
|
+
</PlaceholderContentWrapper>
|
|
164
|
+
);
|
|
178
165
|
|
|
179
166
|
export default themeComponent(
|
|
180
167
|
Placeholder,
|
|
@@ -153,15 +153,7 @@ const PaymentDetailsActions = ({
|
|
|
153
153
|
isInCustomerManagement ? noop : () => handleClick(obligations)
|
|
154
154
|
}
|
|
155
155
|
text="Pay Now"
|
|
156
|
-
variant={
|
|
157
|
-
isMobile
|
|
158
|
-
? isInCustomerManagement
|
|
159
|
-
? "disabledSmallSecondary"
|
|
160
|
-
: "smallSecondary"
|
|
161
|
-
: isInCustomerManagement
|
|
162
|
-
? "disabledSecondary"
|
|
163
|
-
: "secondary"
|
|
164
|
-
}
|
|
156
|
+
variant={isMobile ? "smallSecondary" : "secondary"}
|
|
165
157
|
dataQa="Pay Now"
|
|
166
158
|
disabled={isInCustomerManagement}
|
|
167
159
|
/>
|
|
@@ -172,7 +164,9 @@ const PaymentDetailsActions = ({
|
|
|
172
164
|
<Box padding="8px 0 0" width="100%">
|
|
173
165
|
<ButtonWithAction
|
|
174
166
|
isLoading={isLoading}
|
|
175
|
-
action={() =>
|
|
167
|
+
action={() =>
|
|
168
|
+
isInCustomerManagement ? noop : () => handleClick(obligations)
|
|
169
|
+
}
|
|
176
170
|
text="Pay Now"
|
|
177
171
|
variant={isMobile ? "smallSecondary" : "secondary"}
|
|
178
172
|
dataQa="Pay Now"
|