@thecb/components 7.7.6 → 7.7.7
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 +109 -60
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +109 -60
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/button-with-action/ButtonWithAction.js +4 -3
- package/src/components/atoms/button-with-action/ButtonWithAction.theme.js +14 -0
package/package.json
CHANGED
|
@@ -36,10 +36,10 @@ const SpinnerContainer = styled.div`
|
|
|
36
36
|
|
|
37
37
|
const SpinnerIconWrapper = styled(rotate)``;
|
|
38
38
|
|
|
39
|
-
const Spinner = ({ isMobile }) => (
|
|
39
|
+
const Spinner = ({ color, isMobile }) => (
|
|
40
40
|
<SpinnerContainer>
|
|
41
41
|
<SpinnerIconWrapper initialPose="fixed" pose="rotate">
|
|
42
|
-
<SpinnerIcon isMobile={isMobile} />
|
|
42
|
+
<SpinnerIcon color={color} isMobile={isMobile} />
|
|
43
43
|
</SpinnerIconWrapper>
|
|
44
44
|
</SpinnerContainer>
|
|
45
45
|
);
|
|
@@ -66,6 +66,7 @@ const ButtonWithAction = ({
|
|
|
66
66
|
text,
|
|
67
67
|
textWrap = false,
|
|
68
68
|
isLoading = false,
|
|
69
|
+
loadingColor = "white",
|
|
69
70
|
dataQa = null,
|
|
70
71
|
textExtraStyles,
|
|
71
72
|
contentOverride = false,
|
|
@@ -140,7 +141,7 @@ const ButtonWithAction = ({
|
|
|
140
141
|
) : (
|
|
141
142
|
<Center intrinsic>
|
|
142
143
|
{isLoading ? (
|
|
143
|
-
<Spinner isMobile={isMobile} />
|
|
144
|
+
<Spinner color={loadingColor} isMobile={isMobile} />
|
|
144
145
|
) : (
|
|
145
146
|
<Text
|
|
146
147
|
weight={themeValues.fontWeight}
|
|
@@ -13,6 +13,7 @@ const padding = {
|
|
|
13
13
|
tertiary: "0.75rem 1.5rem",
|
|
14
14
|
ghost: "0.65rem 0",
|
|
15
15
|
danger: "0.75rem 1.5rem",
|
|
16
|
+
dangerSecondary: "0.75rem 1.5rem",
|
|
16
17
|
whiteSecondary: "0.75rem 2rem",
|
|
17
18
|
whitePrimary: "1.125rem 0.75rem"
|
|
18
19
|
};
|
|
@@ -27,6 +28,7 @@ const color = {
|
|
|
27
28
|
ghost: "#15749D",
|
|
28
29
|
tertiary: "#15749D",
|
|
29
30
|
danger: "#FFFFFF",
|
|
31
|
+
dangerSecondary: "#D11053",
|
|
30
32
|
whiteSecondary: "#FFFFFF",
|
|
31
33
|
whitePrimary: "#FFFFFF"
|
|
32
34
|
};
|
|
@@ -41,6 +43,7 @@ const fontSizeVariant = {
|
|
|
41
43
|
ghost: "pL",
|
|
42
44
|
tertiary: "pS",
|
|
43
45
|
danger: "pS",
|
|
46
|
+
dangerSecondary: "pS",
|
|
44
47
|
whiteSecondary: "pS",
|
|
45
48
|
whitePrimary: "pS"
|
|
46
49
|
};
|
|
@@ -55,6 +58,7 @@ const fontWeight = {
|
|
|
55
58
|
ghost: "600",
|
|
56
59
|
tertiary: "600",
|
|
57
60
|
danger: "600",
|
|
61
|
+
dangerSecondary: "600",
|
|
58
62
|
whiteSecondary: "600",
|
|
59
63
|
whitePrimary: "600"
|
|
60
64
|
};
|
|
@@ -69,6 +73,7 @@ const height = {
|
|
|
69
73
|
ghost: "3rem",
|
|
70
74
|
tertiary: "3rem",
|
|
71
75
|
danger: "3rem",
|
|
76
|
+
dangerSecondary: "3rem",
|
|
72
77
|
whiteSecondary: "3rem",
|
|
73
78
|
whitePrimary: "auto"
|
|
74
79
|
};
|
|
@@ -83,6 +88,7 @@ const minWidth = {
|
|
|
83
88
|
ghost: "130px",
|
|
84
89
|
tertiary: "130px",
|
|
85
90
|
danger: "130px",
|
|
91
|
+
dangerSecondary: "157px",
|
|
86
92
|
whiteSecondary: "160px",
|
|
87
93
|
whitePrimary: "130px"
|
|
88
94
|
};
|
|
@@ -97,6 +103,7 @@ const backgroundColor = {
|
|
|
97
103
|
ghost: "transparent",
|
|
98
104
|
tertiary: "transparent",
|
|
99
105
|
danger: "#ED125F",
|
|
106
|
+
dangerSecondary: "transparent",
|
|
100
107
|
whiteSecondary: "transparent",
|
|
101
108
|
whitePrimary: "transparent"
|
|
102
109
|
};
|
|
@@ -111,6 +118,7 @@ const border = {
|
|
|
111
118
|
ghost: "none",
|
|
112
119
|
tertiary: "none",
|
|
113
120
|
danger: "2px solid #ED125F",
|
|
121
|
+
dangerSecondary: "2px solid #D11053",
|
|
114
122
|
whiteSecondary: "2px solid white",
|
|
115
123
|
whitePrimary: "2px solid transparent"
|
|
116
124
|
};
|
|
@@ -125,6 +133,7 @@ const hoverBackgroundColor = {
|
|
|
125
133
|
ghost: "transparent",
|
|
126
134
|
tertiary: "transparent",
|
|
127
135
|
danger: "#BA002C",
|
|
136
|
+
dangerSecondary: "transparent",
|
|
128
137
|
whiteSecondary: "transparent",
|
|
129
138
|
whitePrimary: "transparent"
|
|
130
139
|
};
|
|
@@ -139,6 +148,7 @@ const hoverBorderColor = {
|
|
|
139
148
|
ghost: "transparent",
|
|
140
149
|
tertiary: "transparent",
|
|
141
150
|
danger: "#BA002C",
|
|
151
|
+
dangerSecondary: "#B10541",
|
|
142
152
|
whiteSecondary: "2px solid transparent",
|
|
143
153
|
whitePrimary: "2px solid transparent"
|
|
144
154
|
};
|
|
@@ -153,6 +163,7 @@ const hoverColor = {
|
|
|
153
163
|
ghost: "#116285",
|
|
154
164
|
tertiary: "#116285",
|
|
155
165
|
danger: "#FFFFFF",
|
|
166
|
+
dangerSecondary: "#B10541",
|
|
156
167
|
whiteSecondary: "#FFFFFF",
|
|
157
168
|
whitePrimary: "#FFFFFF"
|
|
158
169
|
};
|
|
@@ -167,6 +178,7 @@ const activeBackgroundColor = {
|
|
|
167
178
|
ghost: "transparent",
|
|
168
179
|
tertiary: "transparent",
|
|
169
180
|
danger: "#870000",
|
|
181
|
+
dangerSecondary: "transparent",
|
|
170
182
|
whiteSecondary: "transparent",
|
|
171
183
|
whitePrimary: "transparent"
|
|
172
184
|
};
|
|
@@ -181,6 +193,7 @@ const activeBorderColor = {
|
|
|
181
193
|
ghost: "transparent",
|
|
182
194
|
tertiary: "transparent",
|
|
183
195
|
danger: "#870000",
|
|
196
|
+
dangerSecondary: "#910029",
|
|
184
197
|
whiteSecondary: "2px solid transparent",
|
|
185
198
|
whitePrimary: "2px solid transparent"
|
|
186
199
|
};
|
|
@@ -195,6 +208,7 @@ const activeColor = {
|
|
|
195
208
|
ghost: "#0E506D",
|
|
196
209
|
tertiary: "#0E506D",
|
|
197
210
|
danger: "#FFFFFF",
|
|
211
|
+
dangerSecondary: "#910029",
|
|
198
212
|
whiteSecondary: "#FFFFFF",
|
|
199
213
|
whitePrimary: "#FFFFFF"
|
|
200
214
|
};
|