@thecb/components 10.2.4-beta.2 → 10.2.4-beta.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/package.json
CHANGED
|
@@ -41,8 +41,12 @@ const PlaceholderContentWrapper = ({
|
|
|
41
41
|
disabled = false
|
|
42
42
|
}) =>
|
|
43
43
|
isLink ? (
|
|
44
|
-
<Link to={destination} data-qa={dataQa} disabled={disabled}>
|
|
45
|
-
<Box
|
|
44
|
+
<Link to={destination} data-qa={dataQa} aria-disabled={disabled}>
|
|
45
|
+
<Box
|
|
46
|
+
padding="0"
|
|
47
|
+
minHeight="100%"
|
|
48
|
+
extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
|
|
49
|
+
>
|
|
46
50
|
{children}
|
|
47
51
|
</Box>
|
|
48
52
|
</Link>
|
|
@@ -53,11 +57,7 @@ const PlaceholderContentWrapper = ({
|
|
|
53
57
|
minHeight="100%"
|
|
54
58
|
dataQa={dataQa}
|
|
55
59
|
aria-disabled={disabled}
|
|
56
|
-
extraStyles={
|
|
57
|
-
disabled
|
|
58
|
-
? "cursor: default; opacity: 0.7;"
|
|
59
|
-
: "cursor: pointer; opacity: 1;"
|
|
60
|
-
}
|
|
60
|
+
extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
|
|
61
61
|
>
|
|
62
62
|
{children}
|
|
63
63
|
</Box>
|
|
@@ -74,21 +74,24 @@ const Placeholder = ({
|
|
|
74
74
|
themeValues,
|
|
75
75
|
dataQa,
|
|
76
76
|
disabled = false
|
|
77
|
-
}) =>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
77
|
+
}) => {
|
|
78
|
+
const tintedColor = `${tint(0.9, themeValues.color)}`;
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<PlaceholderContentWrapper
|
|
82
|
+
isLink={isLink}
|
|
83
|
+
action={action}
|
|
84
|
+
destination={destination}
|
|
85
|
+
dataQa={dataQa}
|
|
86
|
+
disabled={disabled}
|
|
87
|
+
>
|
|
88
|
+
<Box
|
|
89
|
+
padding="0"
|
|
90
|
+
borderRadius="4px"
|
|
91
|
+
border="none"
|
|
92
|
+
minHeight={themeValues.height}
|
|
93
|
+
hiddenStyles={!visible}
|
|
94
|
+
extraStyles={`
|
|
92
95
|
background: linear-gradient(
|
|
93
96
|
to right,
|
|
94
97
|
${variant === "large" ? STORM_GREY : themeValues.color} 40%,
|
|
@@ -109,22 +112,22 @@ const Placeholder = ({
|
|
|
109
112
|
display: flex;
|
|
110
113
|
justify-content: center;
|
|
111
114
|
align-items:center;`}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
115
|
+
hoverStyles={`background-color: ${
|
|
116
|
+
variant === "large" ? GRECIAN_GREY : tintedColor
|
|
117
|
+
};`}
|
|
118
|
+
>
|
|
119
|
+
<Center maxWidth="300px">
|
|
120
|
+
<Box
|
|
121
|
+
padding="0"
|
|
122
|
+
tabIndex="0"
|
|
123
|
+
onKeyPress={e => e.key === "Enter" && !disabled && action()}
|
|
124
|
+
>
|
|
125
|
+
<Cluster justify="center" align="center" minHeight="100%">
|
|
126
|
+
<Switcher maxChildren={2} childGap="0">
|
|
127
|
+
{variant === "large" && <div></div>}
|
|
128
|
+
<Box
|
|
129
|
+
padding="0"
|
|
130
|
+
extraStyles={`.fill {
|
|
128
131
|
fill: ${
|
|
129
132
|
variant === "large" ? CHARADE_GREY : themeValues.color
|
|
130
133
|
};
|
|
@@ -133,44 +136,45 @@ const Placeholder = ({
|
|
|
133
136
|
variant === "large" ? CHARADE_GREY : themeValues.color
|
|
134
137
|
};
|
|
135
138
|
}`}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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
|
-
);
|
|
139
|
+
>
|
|
140
|
+
{variant === "large" ? (
|
|
141
|
+
<Center intrinsic>
|
|
142
|
+
{getLargeIcon(largeIcon)}
|
|
143
|
+
<Text
|
|
144
|
+
variant="pS"
|
|
145
|
+
color={themeValues.color}
|
|
146
|
+
weight={FONT_WEIGHT_REGULAR}
|
|
147
|
+
extraStyles={`text-align: center;`}
|
|
148
|
+
>
|
|
149
|
+
{text}
|
|
150
|
+
</Text>
|
|
151
|
+
</Center>
|
|
152
|
+
) : (
|
|
153
|
+
<Cover singleChild minHeight="100%">
|
|
154
|
+
<Cluster justify="center" align="center">
|
|
155
|
+
<IconAdd />
|
|
156
|
+
<Center intrinsic>
|
|
157
|
+
<Text
|
|
158
|
+
variant="pS"
|
|
159
|
+
color={themeValues.color}
|
|
160
|
+
weight={FONT_WEIGHT_REGULAR}
|
|
161
|
+
extraStyles={`padding: 0 0 0 8px; text-align: center;`}
|
|
162
|
+
>
|
|
163
|
+
{text}
|
|
164
|
+
</Text>
|
|
165
|
+
</Center>
|
|
166
|
+
</Cluster>
|
|
167
|
+
</Cover>
|
|
168
|
+
)}
|
|
169
|
+
</Box>
|
|
170
|
+
</Switcher>
|
|
171
|
+
</Cluster>
|
|
172
|
+
</Box>
|
|
173
|
+
</Center>
|
|
174
|
+
</Box>
|
|
175
|
+
</PlaceholderContentWrapper>
|
|
176
|
+
);
|
|
177
|
+
};
|
|
174
178
|
|
|
175
179
|
export default themeComponent(
|
|
176
180
|
Placeholder,
|